<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="application">
        <span>{{msg}}</span>
    </div>

    <div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>

    <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
        <input v-model="mod"><input v-model="mod">
    </div>

    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>

    <div id="app5">
        <p>{{message}}</p>
        <button v-no:click="reverseMessage">反转消息</button>
    </div>

    <div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>

    <div id="app7">
        <p v-for="(user,index) in arrayUser" :key="index">
            {{index}}-------->
            <span v-udify="user.name">{{user.name}}</span>
            ----------->{{user.age}}
        </p>
        <p>===========================================================</p>
        <p v-for="(user,index) in arrayUser" :key="index">
            {{index}}-------->{{user.name}}----------->{{user.age}}
        </p>
        <p>===========================================================</p>
        <!-- 使用过滤器 fit -->
        <p v-for="(user,index) in arrayUser" :key="index">
            {{index}}-------->{{user.name | fit}}----------->{{user.age}}
        </p>

        <span v-once>IS never change:{{appMsg7}}</span>
    </div>
</body>
<script src="./js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#application",
        data:{
            msg:"Hello Vue!!!!!!"
        }
    })

    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })

    var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true,
            mod : "test"
        }
    })

    var app4 = new Vue({
        el:'#app-4',
        data:{
            todos:[
                {text:'Java才是最鸟的语言'},
                {text:'Vue技术'},
                {text:'C++'}
            ]
        }
    })

    var app5 = new Vue({
        el:"#app5",
        data:{
            message:'Hello Vue.js!'
        },
        methods:{
            reverseMessage:function (){
                this.message = this.message.split('').reverse().join('')
            }
        }
    })

    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'Hello Vue!'
        }
    })

    var app7 = new Vue({
        el: "#app7",
        data: {
            arrayUser: [
                {name: "zs", age: 12},
                {name: "qw", age: 13},
                {name: "er", age: 14},
                {name: "ed", age: 15},
                {name: "ws", age: 16},
            ],
            appMsg7:"之编译一次，显示内容后不再具有响应式功能"
        },
        directives: {
            udify: function (el, binding) {
                el.innerHTML = binding.value.toUpperCase();
            }
        },
        filters: {
            fit: function (value) {
                return value.toUpperCase();
            }
        }
    });
</script>
</html>